<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动-单伪元素法</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .product {
            width: 1240px;
            /*height: 300px;*/
            background-color: #ffbf57;
            margin: 0 auto;
        }

        .product .left {
            width: 234px;
            height: 300px;
            background-color: #ab00ff;
            float: left;
        }

        .product .right {
            width: 978px;
            height: 300px;
            background-color: #ff3939;
            float: right;
        }

        .div1 {
            height: 50px;
            background-color: #b2ff65;
        }

        .clearFix::after {
            content: "";
            display: block;
            clear: both;
        }


    </style>
</head>
<body>
<div class="product clearFix">
    <div class="left"></div>
    <div class="right"></div>
</div>

<div class="div1">

</div>


</body>
</html>